import React,{ useEffect, useState,Key} from 'react';
import { Button,Form, Input, Table,Card,message,Tooltip } from 'antd';
import style from "./index.module.css"
import { SearchOutlined,DeleteOutlined,EditOutlined} from "@ant-design/icons"
import {useNavigate} from "react-router-dom"



// 引入api中请求的方法 
import { getHosSetListRequest, deleteHosSetIdRequest,batchdeleteIdsRequest} from '@/api/hospital/hospitalSet';

import {getHosSetListRecordsType,
  getHosSetListItemsType} from "@api/hospital/model/hospitalSetTypes"

// 类型定义  提上来多次用
interface searchHosFinishPraType {
  hosname?: string,
  hoscode?: string
}

export default function HospitalSet() {
  // 使用编程式路由导航hook  注意hook使用规范1.组件  2.自定义hook
  const navigate=useNavigate();
  //data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
  const [tableData, setTableData] = useState<getHosSetListRecordsType>([])
  //定义current(当前页码)的state[useState的泛型根据我们传入的参数推论出来了]
  const [current, setCurrent] = useState(1)
  //定义total(总个数)的state
  const [total, setTotal] = useState(0)
  //定义pageSize(每页的数量)的state
  const [pageSize, setPageSize] = useState(3)
  //定义isLoading(table是否加载中)
  const [isLoading, setIsLoading] = useState(false);
  const [fieldValue,setFieldValue]=useState<searchHosFinishPraType>({})
  // 重新定义一个状态  删除之后重新渲染
  const [rerender,setRerender]=useState(true)
   //定义一个控制批量删除按钮的一个状态
  const [isSelector,setSeletor]=useState(true)
    //定义一个 保存批量选中的ids的状态
  const [bacthSelectIds,setBatchSelectIds]=useState<Key[]>([])

 
  // 当组件加载的时候,开始请求分页列表的数据
  // 注意:异步函数不能作为useEffect的参数,因为useEffect可能会书写return一个函数起到清理作用,如果是异步函数,则return就是异步的了
  useEffect(()=>{
    // 封装一个请求函数才可以,记得后续调用
  const getHosSetList=async()=>{
  const result=  await getHosSetListRequest({
    page: current,
    limit: pageSize,
    ...fieldValue
     })
    //  console.log (result,"result")
   //1.把得到的结果中records数据(医院列表的数组)设置给state
   setTableData(result.records)
   //2.把得到的结果中 数据的总长度设置给state
   setTotal(result.total)

   //请求完成后要把isLoading修改为false 
   setIsLoading(false)


    }
    getHosSetList();
  },[current,pageSize,fieldValue,rerender])
 
  // colums 是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
  // render函数的第三个参数是当前的数据的下标
  // 正常要求columns中要有key  但是如果书写了dataIndex 则可以省略key
  const columns = [
    {
      title: '序号',
      width: 50,
      render:(_:any,__:any,index:number)=>{
        return index+1
      }
      
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
     
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      width: 120,
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      width: 120,
      fixed: 'right'as "right",
     render:(_:any,data:getHosSetListItemsType)=>{
      const {id}=data;

     return (
      <div>
        <Tooltip title="修改医院" color={'orange'}>
          <Button 
        icon={<EditOutlined />}
         type="primary" 
         onClick={()=>{navigate(`/syt/hospital/updatehosset/${id}`)}} 
         className={style.mr}>
         </Button></Tooltip>
       <Tooltip title="删除医院" color={'pink'}>
       <Button 
        icon={<DeleteOutlined />} 
        type="primary" danger 
        onClick={deleteHosSetIdHandle(id)}
        >
        </Button>
       </Tooltip>
      </div>
     )
     }
    },
  ];


  //事件回调函数
  //1.点击页码以后的事件回调函数
  const pageChangeHandle = (current: number, pageSize: number) => {
    //参数1page:当前点击的页码  参数2 pageSize:每页条数
    //点击以后给state设置page和pageSize的值
    setCurrent(current)
    setPageSize(pageSize)
  }
  // 2.获取表单值的事件回调  要定义类型
  // 点击查询提交表单的事件回调函数  参数是收集当前表单的值 组成的对象
  // FieldValue只是一个参数  任何名字都可以  FieldValue这个名字自己比较符合表单组件
  const searchHosFinishHandle=(FieldValue:searchHosFinishPraType)=>{
    setFieldValue(FieldValue)

  }

  //3. 添加医院事件回调函数    点击添加按钮   更新或者修改表单的事件回调
  const addHosHandle=()=>{
    // 编程式路由导航跳转到组件
    navigate("/syt/hospital/addhosset")

  }

  // 4.删除按钮  医院设置单个删除的回调函数
  const deleteHosSetIdHandle=(id:number)=>{
    return async ()=>{
      // 调用删除的接口
        await deleteHosSetIdRequest(id);
        // 重新渲染
        setRerender(!rerender)
        message.success('删除医院成功')

    }
  }

  // 5.批量删除按钮事件回调函数
  const removebatchHandle=async ()=>{
    // 注意ids是变量  变量放在状态中管理
    await batchdeleteIdsRequest(bacthSelectIds)
    message.success('批量删除医院成功')
    // 重新渲染
    setRerender(!rerender)
    // 恢复批量删除按钮状态
    setSeletor(true)



  }

  return (
  <div className={style.outer}>
     <Card>
     <Form
      name="basic"
      wrapperCol={{ span: 30 }}
      initialValues={{ remember: true }}
      layout='inline'
      autoComplete="off"
      onFinish={searchHosFinishHandle}
    >
      <Form.Item
      
        name="hosname"
       
      >
        <Input  placeholder="医院名称"/>
      </Form.Item>

      <Form.Item
       
        name="hoscode"
        
      >
        <Input placeholder="医院编号" />
      </Form.Item>

    

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
          查询
        </Button>
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="default"  htmlType="reset">
          清空
        </Button>
      </Form.Item>
    </Form>
    <div className={style.mt}>
        <Button type="primary" onClick={addHosHandle} className={style.mr}>添加</Button>
        <Button type="default" danger disabled={isSelector} onClick={removebatchHandle}>批量删除</Button>
      </div>
  {/* 医院设置中的下面的表格 */}
      <Table className={style.mt}
       columns={columns}
       dataSource={tableData}
      // 在table中  要求dataSource 中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为key
       rowKey="id"
       loading={isLoading}
      //  是否设置边框
       bordered
      scroll={{ x: 1500}}
      rowSelection={{
        // 要多选框改变才会触发这个事件
        // ids接收的是唯一的值  是和rowKey的值对应
        onChange(ids: Key[], datas: getHosSetListItemsType[]) {
          //当选项框被修改的时候,实时的修改保存所有被选中id的状态
          setSeletor(!ids.length)
          //当选项框被修改的时候,实时的修改保存所有被选中id的状态
          setBatchSelectIds(ids)
        }
      }}
      pagination={{
        //页码的配置：当前页码
        current: current,
        //总数据的数量
        total:total ,
        //每页条数
        pageSize: pageSize,
        //展示更改每页条数的选项(默认total大于50条的时候开启)
        pageSizeOptions: [2, 3, 4, 5],
        //是否直接开启更新每页条数的选项
        showSizeChanger: true,
        showTotal(total){
          return `总共有${total}条数据`
        },
        onChange:pageChangeHandle,

      }}
      />
     </Card>
  </div>
  )
}
